import './index.scss'

/*
* stroke-dasharray 定义虚线的短划线和缺口的长度
* stroke-dashoffset 虚线的结束位置到路径开始的距离
* */
export function dataProgressBar(props: Record<string, any>) {
    const perimeter = Math.ceil(3.1415 * 2 * 80)
    const percentage = `${Math.ceil(props.progress * 100)}%`
    const dashoffset = props.progress ? Math.ceil(perimeter * (1 - props.progress)) : perimeter
    return <div class='svg-container' data-progress={percentage}>
        <svg style="transform: rotateZ(-90deg);">
            <circle cx="50%" cy="50%" r="80"
                    fill="transparent"
                    stroke="#f0f0f0"
                    stroke-width="10"
            />
            <circle id="transition-element"
                    cx="50%" cy="50%" r="80"
                    fill="transparent"
                    stroke="blue"
                    stroke-linecap="round"
                    stroke-width="10"
                    stroke-dasharray={perimeter}
                    stroke-dashoffset={dashoffset}
            />
        </svg>
    </div>
}

export function panelProgressBar(props: Record<string, any>) {

    // 获取弧形的周长
    function getPerimeter(angle = 360) {
        return Math.ceil(3.1415 * 2 * 80 * angle / 360)
    }

    // 获取缺失的角度
    function getCoincideAngle() {
        return Math.ceil(props.angle * 360)
    }

    // 获取旋转的角度
    function getRotate() {
        return 90 + getCoincideAngle() / 2
    }

    const beforeDasharray = `${getPerimeter(360 - getCoincideAngle())}, ${getPerimeter(getCoincideAngle())}`
    const afterDasharray = `${getPerimeter(360 - getCoincideAngle()) * props.progress}, ${getPerimeter()}`
    const percentage = `${Math.ceil(props.progress * 100)}%`

    return <div class='svg-container' data-progress={percentage}>
        <svg style={"transform: rotateZ(" + getRotate() + "deg);"}>
            <circle cx="50%" cy="50%" r="80"
                    fill="transparent"
                    stroke="#f0f0f0"
                    stroke-width="10"
                    stroke-linecap="round"
                    stroke-dasharray={beforeDasharray}
            />
            <linearGradient id="linear-gradient">
                <stop offset="0%" stop-color="blue"/>
                <stop offset="20%" stop-color="green"/>
                <stop offset="40%" stop-color="red"/>
                <stop offset="60%" stop-color="blue"/>
                <stop offset="80%" stop-color="green"/>
                <stop offset="100%" stop-color="red"/>
            </linearGradient>
            <circle id="transition-element"
                    cx="50%" cy="50%" r="80"
                    fill="transparent"
                    stroke="url(#linear-gradient)"
                    stroke-linecap="round"
                    stroke-width="10"
                    stroke-dasharray={afterDasharray}
            />
        </svg>
    </div>
}
